﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>删除页面元素</title>
	<style>
		body{padding:50px;}
		.datalist{width:100%;border:1px solid #ddd;border-collapse:collapse;}
		.datalist td{padding:3px 5px;border:1px solid #ddd;}
		td{
			height: 20px;
		}
	</style>
    <script src="../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function(){
    		var $table;
    		$('#btnClear').click(function(){
    			
    			$('table').empty();
    		});
    		$('#btnDelete').click(function(){
    			$table = $('table').detach();
    		});
    		$('#btnBack').click(function(){
    			$table.appendTo('body');
    		});
    		
    		function resetNum(){
    			$('tbody tr').each(function(index,tr){
    				$('td:first',this).text(index + 1);
    			})
    		}
    		
    		$('#btnReplace').click(function(){
    			$('tr:last').clone(true).appendTo('tbody');
    			resetNum();
    		});
    		
    		$('tr button').click(function(){
    			$(this).closest('tr').remove();
    			resetNum();
    		})
    	})
    </script>
</head>
<body>
	<button id="btnClear">清空表格</button>
	<button id="btnDelete">删除表格</button>
	<button id="btnBack">回到从前</button>
	<button id="btnReplace">新增行</button>
	<table class="datalist">
		<tbody>
			<tr>
				<td width="10">1</td>
				<td>单元格1</td>
				<td>单元格2</td>
				<td>单元格3</td>
				<td>单元格4</td>
				<td>单元格5</td>
				<td width="60"><button>删除</button></td>
			</tr>

		</tbody>
	</table>
</body>
</html>